<template>
  <div class="user">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">角色管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')">新增角色</el-button>
      </div>
      <s-table
        :expand="false"
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          slot="operation"
          align="center"
          label="可用操作"
          width="100">
          <template scope="s">
            <el-tooltip placement="top">
              <div slot="content">角色授权</div>
              <el-button type="info" icon="search" size="mini" @click="tableAuth(s.row)"></el-button>
            </el-tooltip>
            <el-button type="success" icon="edit" size="mini" @click="tableEdit(s.row)"></el-button>
          </template>
        </el-table-column>
        <el-form-item label="角色名称" prop="name">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_mc"
                    placeholder="角色名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
    </el-card>

    <s-dialog :dialog="dialogAuth" :close="dialogAuthInit">
      <p slot="title">{{dialogAuth.title}}</p>
      <el-tree
        :data="dialogAuth.tree.data"
        ref="tree"
        node-key="id"
        show-checkbox
        accordion>
      </el-tree>
      <el-button slot="footer" @click="dialogAuthSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}角色</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 10, offset: 0}">
            <el-form-item prop="mc" label="角色名称">
              <el-input
                type="text"
                v-model="formDialog.mc"
                placeholder="角色名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 10, offset: 2}">
            <el-form-item prop="bz" label="角色描述">
              <el-input
                type="text"
                v-model="formDialog.bz"
                placeholder="角色描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, AutoPromise} from '~/plugins/Tools';

  function __dialogAuth () {
    return {
      title: '角色授权',
      row: {},
      tree: {
        data: [],
        ids: [],
        ref: 'tree',
      },
    };
  }
  function __form () {
    return {
      mc: { value: '', rule: [ 'vNull' ], search: true },
      bz: { value: '', search: false },
    };
  }
  export default AutoVue({
    name: 'system_role-FEcarWms',
    data: {
      table: {
        column: [
          { label: '角色名称',
            prop: 'mc',
            minWidth: '0px',
            search: true,
          },
          { label: '角色描述',
            prop: 'bz',
            minWidth: '0px',
            search: false,
          },
        ],
        url: '/sysrole/list',
        key: 'id',
        tableColumn: 2,
        muti: false,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        row: {},
      },
      dialogAuth: __dialogAuth(),
    },
    transition: 'slide-fade',
    store: ['MENU'],
    methods: {
      tableEdit (row) {
        this.dialogOpen('PUT', row);
      },
      tableAuth (row) {
        this.dialogAuthOpen(row);
      },
      dialogInit () {
        this.dialog.row = {};
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          this.formDialog.id = 0;
          break;
        case 'PUT':
          this.dialog.title = '修改';
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__form(), more),
          };
          this.dialog.row = more;
          break;
        }
        this.dialog.visible = true;
      },
      dialogSave () {
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            try {
              let {data} = await this.post('/sysrole/add', option);
              option.id = data.id;
              this.table.data = [option, ...this.table.data];
              this.table.total++;
              this.resetFields('formDialog');
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialog', async option => {
            try {
              option.id = this.dialog.row.id;
              await this.post('/sysrole/edit', option);
              for (let index in this.dialog.row) {
                if (this.dialog.row.hasOwnProperty(index)) {
                  this.dialog.row[index] = option[index];
                }
              }
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
      dialogAuthInit () {
        this.dialog = __dialogAuth();
      },
      async dialogAuthOpen (row) {
        let stepIds = [];
        let Ids = [];
        await AutoPromise([
          async () => {
            if (this.MENU.menu.length === 0) {
              this.SET('MENU', await this.post('/sysMenu/getMenus'));
            }
          },
          async () => {
            let {ids} = await this.get('/sysrole/getSysRoleFunction/' + row.id);
            Ids = ids;
          },
        ]);
        if (this.dialogAuth.tree.data.length === 0) this.dialogAuth.tree.data = this.MENU.menu;
        this.dialogAuth.row = row;
        this.dialogAuth.visible = true;
        this.$nextTick(() => {
          for (let key of Ids) {
            if (typeof key === 'undefined') {
              continue;
            }
            if (this.$refs.tree.store.nodesMap[key].childNodes.length === 0) {
              stepIds.push(key);
            }
          }
          this.$refs.tree.setCheckedKeys(stepIds);
        });
      },
      dialogAuthSave () {
        let tree = this.$refs.tree;
        let ids = tree.getCheckedKeys(true);
        let idsParent = [];
        let addIdsParent = key => {
          let parent = tree.store.nodesMap[key].parent;
          if (typeof parent.key === 'undefined' || idsParent.indexOf(parent.key) !== -1) return;
          idsParent.push(parent.key);
          addIdsParent(parent.key);
        };
        for (let item of ids) {
          addIdsParent(item);
        }
        ids = [...ids, ...idsParent];
        this.post('/sysrole/addShouquan', {
          id: this.dialogAuth.row.id,
          ids,
        });
        this.dialogAuth.visible = false;
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
  .form_item_user{
    margin-bottom: 0;
  }

  .upload-user {
    display: block;
    width: 100%;
    float: left;
    .el-upload {
      width: 100px;
      height: 100px;
      border-radius: 50% !important;
      border: 1px solid #fdfffb;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all .5s;
      &:hover {
        border: 1px solid #20a0ff;
        .avatar-uploader-icon{
          color: #20a0ff;
        }
      }
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100%;
      height: 100%;
      line-height: 100px;
      text-align: center;
    }
    .avatar {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .user .el-switch__label {
    span {
      font-size: 12px;
    }
  }

  .user .portrait .cell{
    padding: 0 10px;
  }

  .user .__transfer .el-checkbox__label{
    .label{
      padding-right: 5px;
    }
    .name{

    }
    .show_appId{
      color: #0affce;
    }
    .show_rentId{
      color: #d35e56;
    }
  }

</style>
